<template>
  <div>
    <div v-for="(apisVal,valsKey) in apis">
      <h4>{{ apisVal.name }}</h4>
      <p>接口地址 <code class="base">{{apisVal.baseUrl}}</code> </p>
      <p v-if="apisVal.description">备注：{{apisVal.description}} </p>
      <el-card class="box-card" v-for="(api,i) in apisVal.list" :key="i">
        <div   class="section">
          <p class="header" slot="header">
            <el-tag :type="uiOpt[api.method]">{{api.method.toUpperCase()}}</el-tag>
            <i>{{api.name}}</i>
            <code>{{api.url}}</code>

            <el-button type="text" size="mini" @click=" showApiDetail(valsKey,i) " >
              <i :class=" api.isShow ? 'el-icon-arrow-down':'el-icon-arrow-right'"></i>
            </el-button>
          </p>
          <div v-show="api.isShow">
            <p v-if="api.description">备注：{{api.description}} </p>
            <div class="parameters" v-if=" api.param " >
              <p class="parameters-title"> <i class="el-icon-edit"></i>       Parameters</p>
              <div v-for="( val,key ) in api.param" class="param-item">
                <div class="inputs">
                  <el-input 
                    :key="key"
                    size="small"
                    v-model="api.param[key]" :placeholder="key">
                      <template slot="prepend">{{key}}</template>
                    </el-input>
                </div>
                
                <el-tag type="danger">{{ $apis[valsKey].list[i].param[key] | relpacestr(2) }}</el-tag>

                <el-tag >{{ $apis[valsKey].list[i].param[key] | relpacestr(3) }}</el-tag>

                <el-tag type="primary">{{ $apis[valsKey].list[i].param[key] | relpacestr(1) }}</el-tag>
              </div>

            </div>

            <div class="querys" v-if=" api.query ">
              <p class="parameters-title"> <i class="el-icon-edit"></i>       Querys</p>
              <div v-for="( val,key ) in api.query" class="query-item">
                <div class="inputs">
                  <el-input 
                    :key="key"
                    size="small"
                    v-model="api.query[key]" :placeholder="key">
                      <template slot="prepend">{{key}}</template>
                  </el-input>
                </div>
                
                <el-tag type="danger">{{ $apis[valsKey].list[i].query[key] | relpacestr(2) }}</el-tag>

                <el-tag >{{ $apis[valsKey].list[i].query[key] | relpacestr(3) }}</el-tag>

                <el-tag type="primary">{{ $apis[valsKey].list[i].query[key] | relpacestr(1) }}</el-tag>
                
                

              </div>
            </div>
            
            <div class="request-body" v-if="api.data">
              <p> <i class="el-icon-edit"></i> Request Body </p>
              <div class="request-body-data ">
                <div class="textarea-wrap">
                  <!-- <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    :autosize="autosize"
                    v-model=" api.pdata ">
                  </el-input> -->
                  <textarea name="" v-model="api.pdata"></textarea>
                  
                </div>
                <div class="examples ">
                  <div >
                    入参示例：
                  </div>
                  <jsonviewcomponet :jsondata="api.data"></jsonviewcomponet>
                  
                  
                </div>

                <div class="parameter-specification">
                  <div>
                    参数说明：
                  </div>
                  <jsonviewcomponet :jsondata="api.dataDetail"></jsonviewcomponet>
                </div>

              </div>
            </div>
            
            <el-button 
              @click="submit( valsKey,i )"
              size="small"
              
              type="primary">{{ api.isSend?'等 一 等' :'走 一 个' }}</el-button>

            <div>
              <p><i class="el-icon-upload"></i>   Request</p>
              <div :id=" 'request-'+i " class="json-view-container">
              </div>

            </div>

            <div>
              <p><i class="el-icon-upload"></i>   Response</p>
              <div :id=" 'response-'+i " class="json-view-container">
              </div>
            </div>

          </div>

        </div>
      </el-card>
    </div>
    

    
    <!-- <button @click="parentCall"> ref</button> -->

    <!-- <recursion></recursion> -->

  </div>
</template>

<script>
  import jsonview from 'jsonview'
  import Clipboard from 'clipboard'
  import Axios from 'axios'
  import JsonviewComponet from './jsonview.vue'
  import Recursion from './recursion.vue'
  import URLSearchParams from 'url-search-params'


  let uiOpt={
    'get':'primary',
    'post':'success',
    'put':'warning',
    'delete':'danger',
    'patch':'gray'
  }
  export default {
    name: "",
    components:{
      'jsonviewcomponet':JsonviewComponet,
      'recursion':Recursion
    },
    data() {
      return {
        uiOpt:uiOpt,
        apis:null,
        isTest:true,
        autosize:false,
      };
    },
    computed: {
      
    },
    mounted() {
      

      this.cloneApis()
      $('#json-view').JSONView(this.$apis,{
        collapsed: false,

      })
      //this.parentCall()
      
    },
    methods: {
      cloneApis(){
        let vm =this
        vm.apis = this.easyCopy(this.$apis)
        for(let key in vm.apis){
          vm.apis[key].list.forEach(function(apiOne) {
            vm.$set( apiOne, 'isShow' , false )
            vm.$set( apiOne, 'isSend' , false )
            for(let apiOnekey in apiOne ){
              if(apiOnekey == 'param' || apiOnekey == 'query' || apiOnekey == 'data'){
                if( apiOnekey == 'data' ){
                  apiOne['dataDetail']= vm.easyCopy (apiOne[apiOnekey])
                }
                for(let apiOnekeyKey in  apiOne[apiOnekey] ){
                  apiOne[apiOnekey][apiOnekeyKey]=vm.$relpacestr(apiOne[apiOnekey][apiOnekeyKey],0)
                }

                
              }
            }

            
            //element.isShow = false
          }, this);
        }
      },
      easyCopy(obj){ //
        return JSON.parse(JSON.stringify(obj))
      },
      queryStr(obj){  //拼接查询参数
        let arr=[]
        for(let key in obj){
          if( obj[key]!='' ){
            arr.push( `${key}=${obj[key]}` )
          }
        }
        return arr.join('&')
      },
      spliceKeyDetail(str,index){
        relpacestr(str,index)
      },
      showApiDetail(valsKey,i){
        //console.log(this.apis[valsKey].list[i])
        let vm =this
        this.apis[valsKey].list[i].isShow = !this.apis[valsKey].list[i].isShow
        
      },
      submit(valsKey,i){

        //console.log(JSON.stringify( this.apis[valsKey].list[i] ))
        let baseObj = this.apis[valsKey].list[i]
        let vm = this
        vm.apis[valsKey].list[i].isSend = true
        let newurl=''
        if(baseObj.baseUrl){
          newurl=baseObj.baseUrl+vm.$urlParam( baseObj.url, baseObj.param )
        }else{
         newurl= vm.$apis[valsKey].baseUrl+vm.$urlParam( baseObj.url, baseObj.param )
        }
        let sendConfig={
          url: newurl,
          method : baseObj.method
        }
        if( baseObj.pdata ){
          sendConfig.data = JSON.parse( baseObj.pdata )
        }

        if( baseObj.query ){
          let str = vm.queryStr( baseObj.query )
          if( str.length>0 ){
            if( sendConfig.url.indexOf('?')>-1){
              sendConfig.url+='&'+str
            }else{
              sendConfig.url+='?'+str
            }
          }
          
          
        }
        
        Axios(sendConfig).then(res=>{
          vm.apis[valsKey].list[i].isSend = false
          //console.log(res)
          let resConfig = {
            method:res.config.method,
            data : res.config.data,
            headers:res.config.headers,
            url:res.config.url
          }
          
          resConfig = JSON.parse(JSON.stringify(resConfig))
          let resConfigDom = '#request-'+i
          $(resConfigDom).JSONView(resConfig)

          let response = {
            data : res.data,
            status:res.status,
            statusText:res.statusText
          }
          response=JSON.parse(JSON.stringify(response))
          let responseDom = '#response-'+i
          $(responseDom).JSONView(response)
        })  
      },
      

    },
  }
</script>

<style lang="css" scoped>
  
</style>